<template>
  <div class="app-container">
  	<div class="filter-container">
  		<el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleEdit('create')">{{$t('table.add')}}</el-button>
  	</div>


  	<el-table
  	v-loading="listLoading"
  	:key="tableKey"
  	:data="list"
  	border
  	fit
  	highlight-current-row
  	style="width: 100%;"
    @sort-change="sortChange"
  	>
  	<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="65">
  		<template slot-scope="scope">
  			<span>{{ scope.row.id }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('table.image')" align="center">
  		<template slot-scope="scope">
  			<img :src="scope.row.full_image" />
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('news.platform')" prop="platform" sortable="platform" align="center">
  		<template slot-scope="scope">
  			<template v-for="(item,key) in platformOptions">
          <span v-if="item.value==scope.row.platform">{{ item.label }}</span>
        </template>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('news.link')" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.link }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('news.app_id')" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.app_id }}</span>
  		</template>
  	</el-table-column>
    <el-table-column :label="$t('news.jump_type')" prop="jump_type" sortable="jump_type" align="center">
      <template slot-scope="scope">
        <template v-for="(item,key) in jumpTypeOptions">
          <span v-if="item.value==scope.row.jump_type">{{ item.label }}</span>
        </template>
      </template>
    </el-table-column>
    <el-table-column :label="$t('table.is_display')" prop="is_display" sortable="is_display" align="center">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.is_display>0?true:false" @change="changeDisplay(scope.row)"></el-switch>
      </template>
    </el-table-column>

    <el-table-column :label="$t('table.actions')" align="center" width="200">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleEdit('update', scope.row)">{{ $t('table.edit') }}</el-button>
        <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
      <el-form-item :label="$t('table.title')" prop="title">
        <el-input v-model="temp.title"/>
      </el-form-item>
      <el-form-item :label="$t('table.image')" prop="image">
        <dropzone id="myVueDropzone" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
      </el-form-item>
      <el-form-item :label="$t('news.platform')" prop="platform">
        <el-select v-model="temp.platform" :selected="temp.platform" class="filter-item" placeholder="Please select">
          <el-option v-for="item in platformOptions" :key="item.key" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('news.link')" prop="link">
        <el-input v-model="temp.link"/>
      </el-form-item>
      <el-form-item :label="$t('news.app_id')" prop="app_id">
        <el-input v-model="temp.app_id"/>
      </el-form-item>
      <el-form-item :label="$t('news.jump_type')" prop="jump_type">
        <el-select v-model="temp.jump_type" :selected="temp.jump_type" class="filter-item" placeholder="Please select">
          <el-option v-for="item in jumpTypeOptions" :key="item.key" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('table.is_display')" prop="is_display">
        <el-select v-model="temp.is_display" :selected="temp.is_display" class="filter-item" placeholder="Please select">
          <el-option v-for="item in displayOptions" :key="item.key" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
      <el-button type="primary" @click="editData">{{ $t('table.confirm') }}</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>

import { fetchList,updateRecord } from '@/api/news'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Dropzone from '@/components/Dropzone'

export default {
	components: { Pagination,Dropzone },
	directives: { waves },
	data() {
		return {
      resource:'news',

      //list data
			tableKey: 0,
			list: null,
			total: 0,
			listLoading: false,
			listQuery: {
				page: 1,
				limit: 20,
				sort: '-id'
			},

      //edit data
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit News',
        create: 'Add News'
      },

      //selects
      platformOptions:[
      {label:'All',value:0},
      {label:'iOS',value:1},
      {label:'Android',value:2},
      ],
      jumpTypeOptions:[
      {label:'Internal',value:1},
      {label:'Webview',value:2},
      {label:'App',value:3}
      ],
      displayOptions:[
      {label:'Yes',value:1},
      {label:'No',value:0}
      ]
		}
	},
	created() {
		this.getList()
	},
	methods: {
	    getList() {
	    	helper.getList(fetchList,this);
	    },
      getDefaultTemp() {
        return {
          id: undefined,
          image: '',
          platform: 1,
          link: '',
          app_id: '',
          jump_type: '',
          is_display: 1
        };
      },
      handleEdit(type,row){
        helper.handleEdit(type, row, this);
      },
      handleDelete(row){
        helper.handleDelete(this.resource, row ,this);
      },
      editData(){
        helper.updateResource(this.resource,this.temp,this)
      },
      changeDisplay(row){
        row.is_display=!row.is_display?1:0

        updateRecord(row.id,{
          is_display:row.is_display
        })
      },
      dropzoneS(response) {
        this.temp.image=response.result.image
        this.$message({ message: 'Upload success', type: 'success' })
      },
      dropzoneR(file) {
        this.$message({ message: 'Delete success', type: 'success' })
      },
      sortChange(data) {
        helper.handleSortChange(data,this)
      }
    },
}
</script>
